<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<html>
<head>
<link  rel="stylesheet" href="plug-in/bootstrap/css/bootstrap.min3.3.7.css">
<link rel="stylesheet" href="plug-in/bootstrap/css/bootstrap-table.min.css">
<script type="text/javascript" charset="utf-8" src="plug-in/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf-8" src="plug-in/bootstrap/js/bootstrap.min3.3.7.js"></script>
<script type="text/javascript" charset="utf-8" src="plug-in/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="plug-in/bootstrap/js/bootstrap-modal.js"></script>
    <script type="text/javascript" charset="utf-8" src="plug-in/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<style>
    .width_n{
        width:150px;
    }
</style>
</head>
<body>
<div class="container-fluid">
    <input type="hidden" value="" id="prjId" />
    <div class="col-md-offset-3 col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title text-center">项目</h3>
            </div>
            <div class="panel-body">
                <div id="toolbar" class="btn-group">
                    <button id="btn_add" class="btn btn-primary" <c:if test="${role>0}">style="display: none" </c:if> >
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>增加
                    </button>
                </div>
                <table id="first_table">
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-offset-3 col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title text-center">项目详情</h3>
            </div>
            <div class="panel-body">
                <div id="toolbar2" class="btn-group">
                    <button id="btn_add2" class="btn btn-primary" <c:if test="${role>1}">style="display: none" </c:if>    >
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>增加
                    </button>
                </div>
                <table id="last_table"></table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="prjAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加项目
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="" action="" method="post">
                        <div class="form-group width_n">
                            项目名: <input type="text" id="projectName" class="form-control" placeholder="请输入项目名" />
                        </div>
                        <div class="form-group width_n">
                            项目描述: <input type="text" id="projectDescribe" class="form-control" placeholDer="请输入项目描述" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="submit">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="prjAdd2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        添加项目成员
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group width_n">
                        <input type="hidden" value="" id="userId"/>
                    项目名称:<select id="prjlist" class="form-control">
                    <c:forEach items="${selectList}" var="prj">
                        <option value="${prj.id}">${prj.projectname}</option>
                    </c:forEach>
                    </select>
                    </div>
                    <div class="form-group width_n">
                    项目人员:<input type="text" id="projectuser" name="" value=""  class="form-control" />
                    </div>
                    <div class="form-group width_n">
                    拉货宝帐号:<input type="text" id="lhbaccount" name="" value=""  class="form-control"/>
                    </div>
                    <div class="form-group width_n">
                        账务账号:<input type="text" id="accountNo" name="" value=""  class="form-control"/>
                    </div>
                    <div class="form-group width_n" <c:if test="${role>0}">style="display: none" </c:if> >
                        项目管理员:
                        <select id="isAdmin" class="form-control">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="submit2">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="prjmod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        修改项目成员
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group width_n">
                        <input type="hidden" value="" id="userId2"/>
                    项目名称:<select id="prjlist2" class="form-control">
                    <c:forEach items="${selectList}" var="prj">
                        <option value="${prj.id}">${prj.projectname}</option>
                    </c:forEach>
                </select>
                        </div>
                    <div class="form-group width_n">
                    <input id="empId" type="hidden"/>
                    项目人员:<input type="text" id="projectuser2" name="" value="" class="form-control" />
                        </div>
                    <div class="form-group width_n">
                    拉货宝帐号:<input type="text" id="lhbaccount2" name="" value="" class="form-control"/>
                        </div>
                    <div class="form-group width_n">
                        账务账号:<input type="text" id="accountNo2" name="" value=""  class="form-control"/>
                    </div>
                    <div class="form-group width_n" <c:if test="${role!=0}"> style="display: none;" </c:if>>
                        项目管理员:
                        <select id="isAdmin2" class="form-control">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="submit3">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="prjupdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        修改项目
                    </h4>
                </div>
                <div class="modal-body">
                        <input type="hidden" id="uId">
                    <div class="form-group width_n">
                    项目名: <input type="text" id="uProjectName" name="" value="" class="form-control" placeholder="请输入项目名" />
                        </div>
                    <div class="form-group width_n">
                    项目描述: <input type="text" id="uProjectDescribe" name="" class="form-control" value="" placeholDer="请输入项目描述" />
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="upPrj">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var first_url = 'http://172.16.59.162:8080/mallProjectController.do?';
    var projectData =  [];
    var memberData = [];
    //调用接口方法
    var getData=function(url,data){
        data = (data == null || typeof (data) == "undefined") ? {"date": ""} : data;
        $.post(first_url + url,data,function(res){
            var data = JSON.parse(res);
            if(data.success == true){
                projectData = data.obj;
                initTableOne();
            }else {
                alert(data.msg);
            }
        },true);
    }

    //初始化项目列表
    function initTableOne(){
        $('#first_table').bootstrapTable({
            height:400,
            url:"mallProjectController.do?projectList",
            method:"get",
            search:true,
            showRefresh:true,
            sidePagination: "server",
            pagination: true,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 20, 50, 100, 200, 500],
            toolbar:"#toolbar",
            onDblClickRow: function (item, $element) {
                //(isAdmin||isMine)||(!isAdmin&&!isMine&&!isProjectUser);
                var showOpt = (item.isAdmin||item.isMine)||(!item.isAdmin&&!item.isMine&&!item.isProjectUser);
                initTableTwo(item.id,showOpt);
                return true;
            },
            columns: [
                {
                    field: 'number',
                    title: '全选',
                    checkbox:true
                },
                {
                    field: 'id',
                    title: '序号'
                },
                {
                    field: 'projectname',
                    title: '项目名'
                },
                {
                    field: 'remark',
                    title: '项目描述'
                },
                {
                    field: 'operate',
                    title: '操作',
                    events: firstOperateEvents,
                    formatter: firstOperateFormatter
                }
            ]

        });
    }

    //初始化成员列表
    function initTableTwo(projectId,showOpt){
        $("#prjId").val(projectId);
        console.log($("#last_table").html())
        if($("#last_table").html()!=""){
            var opt = {
                url : "mallProjectController.do?projectEmpList&projectId="+projectId,
                silent:true,
                query:{
                    projectId:projectId
                }
            };
            $("#last_table").bootstrapTable('refresh', opt);
        }else{
            console.log("wer")
            $("#last_table").bootstrapTable({
                height:400,
                url:"mallProjectController.do?projectEmpList&projectId="+projectId,
                method:"get",
                search:true,
                showRefresh:true,
                toolbar:"#toolbar2",
                sidePagination: "server",
                pagination: true,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 50, 100, 200],
                columns:[
                    {
                        file:'choice',
                        title:'全选',
                        checkbox:true
                    },
                    {
                        field: 'employeeId',
                        title: '成员ID',
                        visible:false
                    },
                    {
                        field: 'userId',
                        title: '用户ID',
                        visible:false
                    },
                    {
                        field: 'projectId',
                        title: '项目ID',
                        visible:false
                    },
                    {
                        field: 'accountId',
                        title: '账务账号ID',
                        visible:false
                    },
                    {
                        field:'userName',
                        title:"成员名称"
                    },
                    {
                        field:'realName',
                        title:"成员真实名称"
                    },
                    {
                        field:'projectName',
                        title:"项目组名"
                    },
                    {
                        field:'accountNo',
                        title:"账务账号"
                    },
                    {
                        field:'isAdmin',
                        title:"是否项目管理员"
                    },
                    {
                        field:'role',
                        title:'权限',
                        visible:false
                    },
                    {
                        field: 'operate1',
                        title: '操作',
                        events: lastOperateEvents,
                        formatter: lastOerateFormatter
                    }
                ]
            });
        }
        if(showOpt){
            $("#last_table").bootstrapTable('showColumn', "operate");
            $("#btn_add").show();
            $("#btn_add2").show();
        }else{
            $("#last_table").bootstrapTable('hideColumn', "operate");
            $("#btn_add").hide();
            $("#btn_add2").hide();
        }
    }

    //页面载入时加载
    $("document").ready(function(){
        $("#btn_add").click(function () {
            $("#prjAdd").modal('show');
        });
        $("#btn_add2").click(function () {
            $("#prjAdd2").modal('show');
        });
        initTableOne();
        $("#upPrj").click(function(){
            var projectName = $("#uProjectName").val();
            var projectDesc = $("#uProjectDescribe").val();
            var projectId = $("#uId").val();
            modifyProject(projectId,projectName,projectDesc);
        });
        $("#submit").on("click",function(){
            var projectName = $("#projectName").val(),
                    projectDescribe = $("#projectDescribe").val();
            addproject(projectName,projectDescribe);
        });
        $("#submit2").click(function () {
            var projectId= $("#prjlist").val();
            var projectuser= $("#projectuser").val();
            var lhbUser= $("#lhbaccount").val();
            var accountNo = $("#accountNo").val();
            var isAdmin = $("#isAdmin").val();
            var userId = $("#userId").val();
           var data= {"projectId":projectId , "userId":userId, "userName":lhbUser , "realName":projectuser, "accountNo":accountNo, "isAdmin":isAdmin};
            $.post("mallProjectController.do?addProjectEmp",data,function (res) {
                var data = JSON.parse(res);
                if(data.success==true){
                    $("#prjAdd2").modal('hide');
                    $("div").removeClass("modal-backdrop");
                    $("#projectuser").val("");
                    $("#lhbaccount").val("");
                    refreshTable2();
                }else{
                    alert(data.msg);
                }
            });
        });
        $("#submit3").click(function () {
            var projectId= $("#prjlist2").val();
            var projectuser= $("#projectuser2").val();
            var lhbUser= $("#lhbaccount2").val();
            var empId = $("#empId").val();
            var accountNo = $("#accountNo2").val();
            var isAdmin = $("#isAdmin2").val();
            var userId = $("#userId2").val();
            var data= {"projectId":projectId , "userId":userId, "userName":lhbUser , "realName":projectuser,"employeeId":empId,"accountNo":accountNo,"isAdmin":isAdmin};
            $.post("mallProjectController.do?updateProjectEmp",data,function (res) {
                var data = JSON.parse(res);
                if(data.success==true){
                    refreshTable2();
                    $("#prjmod").modal('hide');
                    $("div").removeClass("modal-backdrop");
                }else{
                    alert(data.msg);
                }
            });
        });
    });

    function addproject(projectName,projectDescribe){
        var data = {"projectName":projectName , "projectDescribe":projectDescribe};
        $.post("mallProjectController.do?addProject",data,function(res){
            var data = JSON.parse(res);
            if(data.success == true){
                $("#projectName").val("");
                $("#projectDescribe").val("");
                refreshTable1();
                $("#prjAdd").modal('hide');
                $("div").removeClass("modal-backdrop");
                $("body").removeClass("modal-open");
            }else {
                alert(data.msg);
            }
        });
    }

    //删除项目
    function deleteProject(projectId){
        var data={"projectId":projectId};
        $.post("mallProjectController.do?delProject",data,function(res){
            var data = JSON.parse(res);
            if(data.success==true){
                refreshTable1();
            }else{
                alert(data.msg);
            }

        });

    }

    //修改内容
    function modifyProject(projectId , projectName,projectDescribe){
        var data={"projectId":projectId ,"projectName":projectName, "projectDescribe":projectDescribe};
        $.post("mallProjectController.do?updateProject",data,function(res){
            var data = JSON.parse(res);
            if(data.success==true){
                $("#prjupdate").modal('hide');
                $("div").removeClass("modal-backdrop");
                refreshTable1();
            }else{
                alert(data.msg);
            }

        });
    }
    //删除成员
    function deleteMember(employeeId){
        $.post("mallProjectController.do?delProjectEmp",{"employeeId":employeeId},function(res){
            refreshTable2();
        });
    }

    function refreshTable1(){
        $("#prjId").val();
        setTimeout(function () {
            $("#first_table").bootstrapTable('refresh');
        },500);
    }
    function refreshTable2(){
        setTimeout(function () {
            $("#last_table").bootstrapTable('refresh');
        },500);
    }
    window.firstOperateEvents = {
        'click .firstPencil': function (e, value, row, index) {
            $("#prjupdate").modal('show');
            $("#uId").val(row.id);
            $("#uProjectName").val(row.projectname);
            $("#uProjectDescribe").val(row.remark);
        },
        'click .firstRemove': function (e, value, row, index) {
            if(confirm("是否确认删除?")) {
                deleteProject(row.id);
            }
        },
    };
    window.lastOperateEvents = {
        'click .lastPencil': function (e, value, row, index) {
            $("#prjlist2 option[value='"+row.projectId+"']").attr("selected", "selected");
            $("#userId2").val(row.userId);
            $("#projectuser2").val(row.realName);
            $("#lhbaccount2").val(row.userName);
            $("#empId").val(row.employeeId);
            $("#prjmod").modal('show');
            $("#accountNo2").val(row.accountNo);
            $("#isAdmin2").val(row.isAdmin=="是"?"1":"0");
        },
        'click .lastRemove': function (e, value, row, index) {
            if(confirm("是否确认删除?")){
                deleteMember(row.employeeId);
            }

        },
    };
    function firstOperateFormatter(value, row, index) {
        var isAdmin = row.isAdmin;
        var isMine = row.isMine;
        var isProjectUser = row.isProjectUser;
        var showOpt = (isAdmin||isMine)||(!isAdmin&&!isMine&&!isProjectUser);
        var opt;
        if(showOpt){
            opt =  [
                '<a class="firstPencil" href="javascript:void(0)" title="Like">',
                '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>  ',
                '<a class="firstRemove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }else{
            opt = [].join('');
        }
        if(index==0){
            initTableTwo(row.id,showOpt);
        }
        return opt;
    }
    function lastOerateFormatter(value, row, index) {
        if(row.role==1) {
            return [
                '<a class="lastPencil" href="javascript:void(0)" title="Like">',
                '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>  ',
                '<a class="lastRemove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }
        return [].join('');
    };

</script>
</body>
</html>